<template>
	<div class="w-full h-9 bg-bg-3 rounded-full flex items-center">
		<div
			v-for="item in tabList"
			:key="item.id"
			@click="handleClick(item.id)"
			class="h-full basis-1/3 rounded-full flex justify-center items-center cursor-pointer transition-all"
			:class="tab === item.id && 'bg-primary'">
			<span class="ml-1 app-font-bold">{{ $t(item.labelT) }}</span>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
	currentTab: {
		type: String,
		default: 'notification'
	},
	tabList: {
		type: Array as any,
		default: () => []
	}
})

const emit = defineEmits(['change'])

const tab = ref(props.currentTab)

watch(
	() => props.currentTab,
	(val) => {
		if (val) {
			tab.value = val
		}
	}
)

const handleClick = (val: string) => {
	if (tab.value !== val) {
		tab.value = val
		emit('change', val)
	}
}
</script>
